<template>
	<!-- 抽取盲盒 -->
	<view>
		<!-- 顶部区域 -->
		<view class="topmain">

			<view class="topnav">
				<view class="userinfo">
					<view class="back" @click="back">
						<image src="/static/images/blindbox/back.png"></image>
					</view>
				</view>
				<!-- <view class="rightTool">
					<image src="/static/images/newhone/baodi1.png" class="baodi1"></image>
					<image src="/static/images/newhone/youxi1.png" class="youxi1"></image>
				</view> -->
				<view class="info">
					<view class="info_left">
						<view class="tool " @click="toAgaincoupon()">
							<image src="@/static/images/newhone/cck.png"></image>
						</view>
						<!-- <view class="tool ">
							<image src="@/static/images/newhone/jdk.png"></image>
						</view> -->
						<view class="tool " style="width: 120rpx;" @click="toCoupon()">
							<image src="@/static/images/newhone/yhq.png"></image>
						</view>
					</view>
					<view class="info_right">
						<view class="tool small" @click="showRule()">
							<image src="@/static/images/newhone/wanfa.png"></image>
						</view>
						<view class="tool small">
							<image src="@/static/images/newhone/kefu.png"></image>
						</view>
						<view class="tool small yinyue">
							<image src="@/static/images/newhone/yinyue.png"></image>
						</view>



					</view>

					<!-- <view class="rightbtn" @click="lr(2)">
				<image src="/static/images//newimage//zuoanniu.png"></image>
			
			</view> -->
				</view>
				<!-- <view class="info">

					<view class="info_right">
						<navigator class="tool1" url="/pages/mine/coupon/coupon">
						
							<image src="/static//images//oneImage/youhuiquan.png"></image>
							<text>优惠券</text>
						</navigator>
						<navigator class="tool1" url="/pages/mine/prop/reextraction">
							
							<image src="/static/images//oneImage/chongchouka.png"></image>
							<text>重抽卡</text>
						</navigator>
						<navigator class="tool1" url="/pages/blindbox/rankinglist">
							<image src="/static/images//oneImage/ouqibang.png"></image>
							<text>欧气榜</text>
						</navigator>
						<navigator class="tool1" url="/pages/blindbox/achievement">
							<image src="/static/images//oneImage/chengjiu.png"></image>
							<text>成就</text>
						</navigator>
						<view class="tool1" @click="showProphesys">
							<image src="/static/images//oneImage//wanfa.png"></image>
							<text>玩法</text>
						</view>
						<view class="tool1" @click="showProphesys">
							<image src="/static/images//oneImage/yuyan.png"></image>
							<text>预言</text>
						</view>
						<view class="tool1" @click="seeProphecylist">
							<image src="/static/images/oneImage/yuyanbang.png"></image>
							<text>预言榜</text>
						</view>
						<navigator class="tool1" url="/pages/mine/prop/goodsfragment">
							<image src="/static/images/oneImage//suipian.png"></image>
							<text>碎片</text>
						</navigator>
					</view>
				</view> -->
				<view class="mainpic">
					<image :src="payInfo1.cover_image" class="mainpic_img" @click="seemore"></image>
					<view class="price1"> <text class="icon">¥</text> {{payInfo1.price}} <text class="unit">/个</text>
					</view>
					<image src="@/static/images/newhone/dizuo.png" class="dizuo"></image>
				</view>


				<view class="GoodsBox">
					<view class="lt">
						全部商品
						<text>商品抽中存在概率性/付费请谨慎</text>
					</view>
					<view class="rt" @click="seemore">
						<image src="@/static/images/newhone/top.png"></image>
						点击查看
					</view>
					<view class="cate">
						<view class="cateList">
							<view class="item">
								<image src="../../static/images/newhone/chuanshuo.png"></image>
								{{energyInfo.virtual_legend_probability || 0}}%
							</view>
							<view class="item">
								<image src="../../static/images/newhone/shishi.png"></image>
								{{energyInfo.virtual_epic_probability || 0}}%
							</view>
							<view class="item">
								<image src="../../static/images/newhone/xiyou.png"></image>
								{{energyInfo.virtual_rare_probability || 0}}%
							</view>
							<view class="item">
								<image src="../../static/images/newhone/gaoji.png"></image>
								{{energyInfo.virtual_normal_probability || 0}}%
							</view>
						</view>
						<swiper class="cateGoods" circular :autoplay="true" display-multiple-items="4" :interval="1000"
							:duration="6000">
							<swiper-item v-for="(item,index) in allGoodslist" :key="index">
								<view class="li" @click="toDetail(item.goods_id)">
									<image class="goodImage" :src="item.cover_image"></image>
									<image class="typeImage" v-if="item.type == 1"
										src="../../static/images/newhone/chuanshuo.png"></image>
									<image class="typeImage" v-if="item.type == 2"
										src="../../static/images/newhone/shishi.png"></image>
									<image class="typeImage" v-if="item.type == 3"
										src="../../static/images/newhone/xiyou.png"></image>
									<image class="typeImage" v-if="item.type == 4"
										src="../../static/images/newhone/gaoji.png"></image>
									<view class="goodPrice">￥{{item.goods_price}}</view>
								</view>
							</swiper-item>
						</swiper>

					</view>
				</view>
				<view class="botbtn">
					<view class="five">
						<view class="youhui">
							<image src="/static/images/newhone/xiaofeiyouli.png"></image>
							<!-- <text>已优惠￥{{discountMoney || 0}}</text> -->
						</view>
						<!-- <view class="btn1" @click="toPay(2)">
						<text>五连绝世</text>
						<text> ￥{{payInfo2.price}}</text>
					</view> -->
					</view>
					<view class="btn2" @click="$refs.gameModal.open()">
						<!-- <text>一发入魂</text>
					<text> ￥{{payInfo1.price}}</text> -->
					</view>
				</view>


			</view>
		</view>
		<overlay title="盲盒玩法规则" :content="ruleInfo" ref="overlay" />
		<u-mask :show="isShowdynamicpic">
			<view class="dynamicpic">
				<image :src="gifUrl"></image>
			</view>
		</u-mask>
		<!-- 可开出商品 -->
		<view class="main">


		</view>
		<!-- 全部商品 -->
		<u-popup v-model="showMoregoods" mode="bottom" border-radius="36" :mask-close-able="false">
			<view class="all">
				<view class="allgoods">
					<view class="allgoods_title">开盒必出以下宝贝之一
						<text>共{{allFilterGoodslist.length}}款({{specialGoodsNum.length}}个传说/史诗/稀有)</text>
					</view>
					<view class="allgoods_close" @click="hideMoregoods">X</view>
					<view class="allgoods_tag">

						<!-- <view style="background-color: #9D403E;" @click="changeLevel(0)">全部</view> -->
						<view class="chuanshuo1" :class="curLevel==1?'active':''" @click="changeLevel(1)">
							<image class="typeImage" src="@/static/images/newhone/chuanshuo.png"></image>
							<text :style="curLevel == 1?'color:#fff':''">{{getNum(1)}}</text>
						</view>
						<view class="shishi1" @click="changeLevel(2)" :class="curLevel==2?'active':''">
							<image class="typeImage" src="@/static/images/newhone/shishi.png"></image>
							<text :style="curLevel == 2?'color:#fff':''">{{getNum(2)}}</text>
						</view>
						<view class="xiyou1" @click="changeLevel(3)" :class="curLevel==3?'active':''">
							<image class="typeImage" src="@/static/images/newhone/xiyou.png"></image>
							<text :style="curLevel == 3?'color:#fff':''">{{getNum(3)}}</text>
						</view>
						<view class="putong1" @click="changeLevel(4)" :class="curLevel==4?'active':''">
							<image class="typeImage" src="@/static/images/newhone/gaoji.png"></image>
							<text :style="curLevel == 4?'color:#fff':''">{{getNum(4)}}</text>
						</view>
					</view>
				</view>
				<view class="goodslist" style="margin-top: 240rpx;padding-bottom: 150rpx;background-color: #F5F5F5;">
					<view class="goods" v-for="(item, index) in filterGoodslist" :key="index"
						@click="toDetail(item.goods_id)">
						<!-- <view class="goods_tag "
							:class="item.type == 4 ? 'putong tag4' : item.type == 3 ? 'xiyou tag3' : item.type == 2 ? 'shishi tag2' : item.type == 1 ? 'chuanshuo tag1' : ''">
							{{ item.type | tag }}
						</view> -->
						<image class="tagImage" v-if="item.type == 1" src="@/static/images/newhone/chuanshuo.png">
						</image>
						<image class="tagImage" v-if="item.type == 2" src="@/static/images/newhone/shishi.png"></image>
						<image class="tagImage" v-if="item.type == 3" src="@/static/images/newhone/xiyou.png"></image>
						<image class="tagImage" v-if="item.type == 4" src="@/static/images/newhone/gaoji.png"></image>
						<image :src="item.cover_image" class="goods_pic"></image>
						<view class="goods_price">{{ item.goods_price }}元</view>
						<view class="goods_title">
							<text>{{ item.goods_name }}</text>
						</view>
					</view>
				</view>
			</view>

		</u-popup>
		<!-- 支付框 -->
		<u-popup v-model="showPayframe" mode="bottom" border-radius="36" :mask-close-able="false">
			<view class="payframe">
				<view class="pay">
					<view class="pay_title">确认支付</view>
					<view class="pay_close" @click="showPayframe = false">X</view>
				</view>
				<view class="paytip1">
					<text>商品抽奖存在概率，付费请谨慎/3件包邮（偏远地区除外）</text>
				</view>
				<view class="paygoods">
					<image :src="payInfo.cover_image" class="paygoods_pic"></image>
					<view class="paygoodsinfo">
						<view class="paygoodsinfo_title">{{payInfo.name}}</view>
						<view class="paygoodsinfo_desc">{{payInfo.activity_describe}}</view>
						<view class="paygoodsinfo_price">￥{{initPrice}}</view>
					</view>
				</view>
				<view class="payinfo">
					<view class="payinfo_title">优惠券</view>
					<navigator class="payinfo_text" style="justify-content: flex-end;"
						:url="`/pages/mine/coupon/availableCoupon?amount=${initPrice}&id=${id}`"
						v-if="JSON.stringify(coupon)=='{}'">
						<text v-if="couponList.length===0" @click.stop>暂无可用优惠券</text>
						<text v-else>选择优惠券</text>
					</navigator>
					<navigator class="payinfo_text"
						:url="`/pages/mine/coupon/availableCoupon?amount=${initPrice}&id=${id}`"
						v-if="JSON.stringify(coupon)!='{}'">
						<view class="payinfo_text_coupon">{{coupon.price}}元优惠券 <text
								style="color: #FF0000;">-￥{{coupon.price}}</text></view>
					</navigator>
				</view>
				<view class="payinfo">
					<view class="payinfo_title">心愿币抵扣</view>
					<view class="payinfo_text">
						<text>可用心愿币为<text style="color: #FF6407;">￥{{payBalance}}</text></text>
						<view class="payinfo_text_icon" @click="isUsebalance=!isUsebalance">
							<image src="/static/images/mall/moneychecked.png" v-if="isUsebalance"></image>
							<image src="/static/images/mall/check.png" v-else></image>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="paymoney">
					<view class="paymoney_title">还需要支付</view>
					<view class="paymoney_money">￥{{usebalancePayablemoney}}</view>
				</view>
				<view class="paytype">
					<view class="paytype_item" @click="payActive=1">
						<image src="/static/images/mall/paychecked.png" v-if="payActive === 1"
							class="paytype_item_check"></image>
						<image src="/static/images/mall/check.png" v-else class="paytype_item_check"></image>
						<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
						<text>支付宝支付</text>
					</view>
					<view class="paytype_item" @click="payActive=2">
						<image src="/static/images/mall/paychecked.png" v-if="payActive === 2"
							class="paytype_item_check"></image>
						<image src="/static/images/mall/check.png" v-else class="paytype_item_check"></image>
						<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
						<text>微信支付</text>
					</view>
				</view>
				<view class="paytip2">
					<text>商品不满意可以回收，回收率约为70%，心愿币不支持提现。</text>
				</view>
				<view class="paybtn" v-if="open_method === 2" @click="payBefore(2)">
					<text>￥{{usebalancePayablemoney}}</text>
					<text style="margin-left: 30rpx;">五连绝世</text>
				</view>
				<view class="paybtn" v-else @click="payBefore(1)">
					<text>￥{{usebalancePayablemoney}}</text>
					<text style="margin-left: 30rpx;">一发入魂</text>
				</view>
				<view class="payagree" @click="isAgree=!isAgree">
					<view class="payagree_icon">
						<image src="/static/images/agreechecked.png" v-if="isAgree"></image>
						<image src="/static/images/agreecheck.png" v-else></image>
					</view>
					<view class="payagree_text">
						我已阅读并同意<text @click="toPurchaseInstructions">《盲盒购买须知》</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 抽奖结果 -->
		<u-mask :show="showMask">
			<view class="warp">
				<view class="play" @tap.stop v-if="open_method === 2">
					<view class="play_text">五连绝世结果</view>
					<image src="/static/images/mall/close.png" class="play_close" @click="showMask = false"></image>
					<view class="play_five">
						<view class="play_pics" v-for="(item,e) in extractionResults" :key="e">
							<view class="play_pics_image">
								<image :src="item.cover_image" class="play_pics_image_img"></image>
								<image src="/static/images/home/faguang.png" class="play_pics_image_bg"></image>
							</view>
							<view class="play_pics_value">
								<text class="play_pics_value_tag"
									:class="item.type=='稀有'?'xiyou':item.type=='史诗'?'shishi':item.type=='传说'?'chuanshuo':'putong'">{{item.type}}款</text>
								<text class="play_pics_value_text">价值￥{{parseInt(item.goods_price)}}</text>
							</view>
							<view class="play_pics_title">{{item.goods_name}}</view>
						</view>
						<view class="play_fragments">
							<view class="play_fragments_item" v-for="(item,f) in extractionResults" :key="f">
								<image :src="item.s_goods.s_image" class="play_fragments_item_img"></image>
								<text class="play_fragments_item_text">{{item.s_goods.goods_name}}
									{{item.s_goods.s_id}}号碎片*1</text>
							</view>
						</view>
					</view>
					<view class="play_btn1" @click="showPaybtn(2)">再来五次</view>
					<navigator class="play_btn2" url="/pages/package/package">不喜欢，前往回收</navigator>
					<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
				</view>
				<view class="play" @tap.stop v-else>
					<view class="play_text">一发入魂结果</view>
					<image src="/static/images/mall/close.png" class="play_close" @click="showMask = false"></image>
					<view class="play_pic">
						<image :src="extractionResults[0].cover_image" class="play_pic_img"></image>
						<image src="/static/images/home/faguang.png" class="play_pic_bg"></image>
					</view>
					<view class="play_value">
						<text class="play_value_tag"
							:class="extractionResults[0].type=='稀有'?'xiyou':extractionResults[0].type=='史诗'?'shishi':extractionResults[0].type=='传说'?'chuanshuo':'putong'">{{extractionResults[0].type}}款</text>
						价值￥{{extractionResults[0].goods_price}}
					</view>
					<view class="play_title">{{extractionResults[0].goods_name}}</view>
					<view class="play_fragment"
						v-if="JSON.stringify(extractionResults[0].s_goods)!='{}' && JSON.stringify(extractionResults[0].s_goods)!='[]'">
						<image :src="extractionResults[0].s_goods.s_image" class="play_fragment_img"></image>
						<text>{{extractionResults[0].s_goods.goods_name}}
							{{extractionResults[0].s_goods.s_id}}号碎片*1</text>
					</view>
					<view class="play_btn1" @click="showPaybtn(1)">再来一次</view>
					<view class="play_btn2" @click="repumping"
						v-if="againcouponList.length>0 && extractionResults[0].can_again == 1">重抽一次</view>
					<navigator class="play_btn2" url="/pages/package/package" v-else>不喜欢，前往回收</navigator>
					<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
				</view>
			</view>
		</u-mask>
		<!-- 试玩 -->
		<u-mask :show="showDemo">
			<view class="warp">
				<view class="play" @tap.stop>
					<view class="play_text">一发入魂结果</view>
					<image src="/static/images/mall/close.png" class="play_close" @click="showDemo = false"></image>
					<view class="play_pic">
						<image :src="tryonceInfo.cover_image" class="play_pic_img"></image>
						<image src="/static/images/home/faguang.png" class="play_pic_bg"></image>
					</view>
					<view class="play_value">
						<text class="play_value_tag"
							:class="tryonceInfo.type=='稀有'?'xiyou':tryonceInfo.type=='史诗'?'shishi':tryonceInfo.type=='传说'?'chuanshuo':'putong'">{{tryonceInfo.type}}款</text>
						价值￥{{tryonceInfo.goods_price}}
					</view>
					<view class="play_title">{{tryonceInfo.goods_name}}</view>
					<view class="play_fragment"
						v-if="JSON.stringify(tryonceInfo)!='{}' && JSON.stringify(tryonceInfo)!='[]'">
						<image :src="tryonceInfo.s_goods.s_image" class="play_fragment_img"></image>
						<text>{{tryonceInfo.s_goods.goods_name}} {{tryonceInfo.s_goods.s_id}}号碎片*1</text>
					</view>
					<view class="play_btn1" @click="showPaybtn(1)">直接来把真的</view>
					<view class="play_btn3">不喜欢的可以回收</view>
					<view class="play_tip">注：本页面只作为中奖体验效果展示，非实际中奖！</view>
				</view>
			</view>
		</u-mask>
		<!-- 预言未解锁提示 -->
		<u-mask :show="showTip">
			<view class="warp">
				<view class="prophesytip" @tap.stop>
					<image src="/static/images/home/jiesuo.png"></image>
					<view class="prophesytip_text">抽取一次盲盒即可解锁预言家功能</view>
					<view class="prophesytip_desc">成为预言家可获得盲盒额外收益</view>
					<view class="prophesytip_btns">
						<view class="prophesytip_btns_btn1" @click="showTip=false">我知道了</view>
						<view class="prophesytip_btns_btn2" @click="showPaybtn(1)">立即解锁</view>
					</view>
				</view>
			</view>
		</u-mask>
		<!-- 预言设置 -->
		<u-popup v-model="showProphecySetup" mode="bottom" border-radius="36">
			<view class="prophecySetup">
				<view class="prophecySetup_top">
					<view class="prophecySetup_top_left">
						抽中预言商品，可获得盲盒消费返点
					</view>
					<image :src="predictGoods.cover_image" class="prophecySetup_top_pic"></image>
					<view class="prophecySetup_top_right">
						预言商品将于{{predict_time}}自动失效， 记得每天设置哦~
					</view>
					<view class="prophecySetup_top_close" @click="hideProphecySetup">X</view>
				</view>
				<view class="prophecySetup_tag">
					<text v-for="(tag,i) in tags" :key="i" :class="{'activeTag':curLevel===i+1}"
						@click="changeLevel(i+1)">{{tag}}</text>
				</view>
				<view class="prophecySetup_goodslist">
					<scroll-view scroll-x="true" style="white-space: nowrap;">
						<view class="prophecySetup_goodslist_item" :class="{'goodsactive':prophecyGoodsIndex===index}"
							v-for="(item,index) in filterGoodslist" :key="index" @click="selectGoods(item,index)">
							<view class="prophecySetup_goodslist_item_tag"
								:class="item.type==4?'putong':item.type==3?'xiyou':item.type==2?'shishi':item.type==1?'chuanshuo':''">
								{{item.type | tag}}
							</view>
							<image :src="item.cover_image" class="prophecySetup_goodslist_item_pic"></image>
							<view class="prophecySetup_goodslist_item_price">
								<image src="/static/images/mall/pricebg.png"></image>
								<text>{{item.goods_price}}元</text>
							</view>
							<view class="prophecySetup_goodslist_item_title">{{item.goods_name}}</view>
						</view>
					</scroll-view>
				</view>
				<view class="prophecySetup_setup">
					<view class="prophecySetup_setup_desc">抽中预约商品，可获得盲盒消费返点{{enjoy_consumption}}</view>
					<view class="prophecySetup_setup_btn" @click="confirmSetup">确定设置</view>
				</view>
			</view>
		</u-popup>
		<!-- 预言榜 -->
		<u-popup v-model="showProphecylist" mode="bottom" border-radius="36">
			<view class="prophecylist">
				<view class="prophecy">
					<view class="prophecy_title">预言收益榜</view>
					<view class="prophecy_desc">
						<text>玩法说明</text>
						<image src="/static/images/mall/doubt.png" @click="showProphecy"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="morePredictlist"
					style="max-height: 600rpx;margin-bottom: 30rpx;" v-if="prophecyList.length>0">
					<view class="prophecyitem" v-for="(item,index) in prophecyList" :key="index">
						<view class="prophecyitem_info">
							<view class="prophecyitem_info_sort"
								:class="index===0?'first':index===1?'second':index===2?'third':''">{{index+1}}</view>
							<image :src="item.avatar" class="prophecyitem_info_avatar"></image>
							<view class="prophecyitem_info_nickname">{{item.user_name}}</view>
						</view>
						<view class="prophecyitem_price">￥{{item.total_price}}</view>
					</view>
				</scroll-view>
				<noData v-else />
			</view>
			<view class="myprophecy">
				<view class="myprophecy_info">
					<image :src="myprophecy.avatar" class="myprophecy_info_avatar"></image>
					<view class="myprophecy_info_nickname">{{myprophecy.user_name}}</view>
					<view class="myprophecy_info_sort">{{myprophecy.rank}}</view>
				</view>
				<view class="myprophecy_price">￥{{myprophecy.total_price}}</view>
			</view>
		</u-popup>
		<!-- 预言玩法说明 -->
		<u-popup v-model="showProphecyExplain" mode="bottom" border-radius="36" height="50%">
			<view class="prophecyExplains">
				<view class="prophecyExplain">
					<view class="prophecyExplain_title">预言玩法说明</view>
					<view class="prophecyExplain_close" @click="showProphecyExplain = false">X</view>
				</view>
				<view class="prophecyInfo">
					<rich-text :nodes="prophecyExplain"></rich-text>
				</view>
			</view>
		</u-popup>
		<!-- 立即开盒子 -->
		<uni-popup ref="gameModal" type="center" :animation="true">
			<Game @close="$refs.gameModal.close()" :showTag="false" @play="(e)=>toPay(e)" />
		</uni-popup>
	</view>
</template>

<script>
	import danmu from "@/components/danmu"
	import overlay from '@/components/overlay'
	import blindbox from '@/components/goodslist/index_box'
	import pullDownRefresh from '@/components/pullDownRefresh'
	import Game from './components/game.vue'
	export default {
		components: {
			Game,
			danmu,
			overlay,
			blindbox,
			pullDownRefresh
		},
		data() {
			return {
				id: 0,
				notice: [{
					avatar: '',
					goods_name: [],
					user_name: ''
				}], //滚动公告
				initPrice: '', //初始价格
				againcouponList: [], //可用的重抽卡列表
				order_id: '', //当前抽取盲盒的订单id
				userbalance: '', //可用心愿币
				balance: '', //心愿币付款金额
				curGoodsIndex: 0, //当前商品索引
				allGoodslist: [{
					cover_image: '',
					goods_name: ''
				}], //当前活动所含全部商品列表
				filterGoodslist: [{
					cover_image: '',
					goods_name: ''
				}], //当前活动所含全部商品列表-按等级筛选
				goodsList: [{
					cover_image: '',
					goods_name: ''
				}], //当前活动所含部分商品列表
				blindboxList: [], //猜您喜欢
				tags: ['传说', '史诗', '稀有', '普通'], //商品等级标签
				curLevel: 0, //当前选中的商品等级
				ruleInfo: '', //盲盒玩法规则
				showMoregoods: false, //显示更多商品
				showPayframe: false, //显示支付框
				isUsebalance: false, //是否使用心愿币抵扣
				usebalancePayablemoney: 0, //使用心愿币抵扣后应支付金额
				couponDeduction: 0, //优惠券抵扣金额
				isDeduction: false, //是否选择优惠券抵扣
				couponList: [], //可用优惠券列表
				coupon: {}, //选中的优惠券信息
				payActive: 2, //当前选中的支付方式 1支付宝 2微信
				isAgree: true, //是否同意盲盒购买须知
				open_method: 1, //当前抽取的次数类型 1单抽 2五连抽
				showMask: false, //显示抽奖结果
				showDemo: false, //显示试玩结果
				showTip: false, //显示预言家解锁提示
				showProphecySetup: false, //显示预言设置
				prophecyGoods: '', //当前选中的预言商品
				prophecyGoodsIndex: -1, //当前选中的预言商品索引
				showProphecylist: false, //显示预言榜
				prophetInfo: {
					avatar: '',
					user_name: '',
					total_price: ''
				}, //预言家信息
				predictGoods: '', //我预言的商品
				prophecyList: [], //预言榜
				myprophecy: {}, //预言榜 我的排名信息
				showProphecyExplain: false, //显示预言玩法说明
				prophecyExplain: '', //预言玩法说明
				isShowdynamicpic: false, //显示开盒动画
				loading: 0,
				predict_lock: 0, //是否已解锁预言家功能 0未解锁 1已解锁
				page: 1, //推荐商品分页
				offset: 1, //预言榜分页
				payBalance: '', //购买界面可用心愿币
				payBalance1: '', //购买界面可用心愿币 - 单抽
				payBalance2: '', //购买界面可用心愿币 - 五连抽
				payBalance3: '', //购买界面可用心愿币 - 五连抽
				payBalance10: '', //购买界面可用心愿币 - 五连抽
				payInfo: {}, //购买界面信息
				payInfo1: {}, //购买界面信息 - 单抽
				payInfo2: {}, //购买界面信息 - 五连抽
				payInfo3: {}, //购买界面信息 - 五连抽
				payInfo10: {}, //购买界面信息 - 五连抽
				extractionResults: [{
					cover_image: '',
					goods_name: '',
					s_goods: {
						goods_name: '',
						s_id: '',
						s_image: ''
					}
				}], //抽取盲盒结果
				tryonceInfo: {
					goods_id: '',
					goods_name: '',
					goods_price: '',
					cover_image: '',
					s_goods: {
						goods_name: '',
						s_id: '',
						s_image: ''
					}
				}, //试玩结果	
				enjoy_consumption: '', //抽中预言商品返点
				predict_time: '', //预言商品失效时间
				energyInfo: {}, //盲盒活动能量buff和模拟概率
				allowTap: true, //防误触
				gifUrl: '/static/images/dynamicpic.gif',
				timer: '',
				isBuytip: true, //是否同意未成年人购买提示
				energy: '0', //当前能量值
				couponNum: 0, //可用优惠券数量
				againcouponNum: 0, //可用重抽卡数量
				allFilterGoodslist: [],
				specialGoodsNum: [],
				overH: 0
			}
		},
		filters: {
			tag(v) {
				switch (v) {
					case 1:
						return '传说款'
					case 2:
						return '史诗款'
					case 3:
						return '稀有款'
					case 4:
						return '普通款'
					default:
						break
				}
			}
		},
		watch: {
			showProphecylist(show) {
				if (!show) {
					this.offset = 1;
					this.prophecyList = [];
				}
			},
			showPayframe(show) {
				if (!show) {
					this.coupon = {};
					this.isUsebalance = false;
					this.payInfo.price = this.initPrice;
				}
			},
			isUsebalance() {
				if (this.isUsebalance && Number(this.payBalance) >= this.payInfo.price) {
					this.usebalancePayablemoney = 0;
					this.balance = this.payInfo.price;
				} else if (this.isUsebalance && Number(this.payBalance) < this.payInfo.price) {
					this.usebalancePayablemoney = this.payInfo.price - Number(this.payBalance);
					this.balance = this.payInfo.balance;
				} else {
					this.usebalancePayablemoney = this.payInfo.price;
					this.balance = 0;
				}
			}
		},
		computed: {
			discountMoney() {
				let discountMoney = (Number(this.payInfo1.price) * 5 - Number(this.payInfo2.price)).toFixed(2);
				return discountMoney
			}
		},
		onLoad(options) {
			console.log("options: ", options);
			uni.showLoading({
				title: '加载中...'
			})
			if (options.id) {
				this.id = options.id;
				uni.setStorageSync('blindboxId', this.id);
			}
			this.getActivityDetail();
			this.getIndexExtractboxa1();
			this.getIndexExtractboxa2();
			this.getIndexMyagaincoupon();
			// this.getCouponnum();
			this.getSelectpredict();
			this.getEnergy();
			this.rollnotice();
			this.getIndexRecommend();
		},
		onShow() {
			const that = this
			this.timer = setInterval(() => {
				this.rollnotice();
			}, 18000)
			if (uni.getStorageSync('blindboxId')) {
				this.id = uni.getStorageSync('blindboxId');
				setTimeout(() => {
					this.getActivityDetail();
					this.getIndexExtractboxa1();
					this.getIndexExtractboxa2();
					this.getIndexExtractboxa3();
					this.getIndexExtractboxa10();
					this.getIndexMyagaincoupon();
					this.getSelectpredict();
					this.getEnergy();
					this.rollnotice();
					this.getIndexRecommend();
				}, 1000)
			}
			uni.getSystemInfo({
				success(res) {
					// windowHeight:568
					console.log(res);
					that.overH = res.windowHeight > 812
				}
			})
		},
		onHide() {
			clearInterval(this.timer);
		},
		onReachBottom() {
			this.page++;
			this.getIndexRecommend();
		},
		methods: {
			//获取盲盒详情
			getActivityDetail() {
				this.$api.activityDetail({
					activity_id: this.id
				}).then(res => {
					if (res.predict.avatar && res.predict.user_name && res.predict.total_price) {
						this.prophetInfo = res.predict;
					}
					this.userbalance = res.balance;
					this.predict_lock = res.predict_lock;
					this.predictGoods = res.predict_goods;
					this.energy = res.energy;
					this.getIndexBlindboxrules();
					this.getIndexPredictintroduce();
					this.getActivityList();
				})
			},
			//获取优惠券、重抽卡数量
			getCouponnum() {
				this.$api.couponnum().then(res => {
					this.couponNum = res.coupon_num;
					this.againcouponNum = res.again_coupon_num;
				})
			},
			back() {
				let page = getCurrentPages();
				let prevPage = page[page.length - 2];
				if (prevPage.route == 'pages/blindbox/blindbox_result') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack();
				}
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/mall/goodsDetail?id=${id}`
				})
			},
			//获取滚动公告
			rollnotice() {
				this.$api.rollnotice().then(res => {
					this.notice = res;
				})
			},
			//获取盲盒活动能量buff和模拟概率
			getEnergy() {
				this.$api.energy({
					activity_id: this.id
				}).then(res => {
					this.energyInfo = res;
				})
			},
			//预言商品界面
			getSelectpredict() {
				this.$api.indexSelectpredict({
					activity_id: this.id
				}).then(res => {
					this.enjoy_consumption = res.enjoy_consumption;
					this.predict_time = res.predict_time;
				})
			},
			getNum(type) {
				const arr = this.allFilterGoodslist.filter(item => item.type === type)
				return (arr.length / this.allFilterGoodslist.length * 100).toFixed(2) + '%'
			},
			//获取盲盒全部商品
			getActivityList() {
				this.$api.indexMoregoods({
					activity_id: this.id,
					type: this.curLevel
				}).then(res => {
					uni.hideLoading();
					this.allGoodslist = res;
					this.filterGoodslist = res;
					this.allFilterGoodslist = res
					this.specialGoodsNum = res.filter((item, index) => {
						if (item.type !== 4) {
							return item
						}
					})
					if (this.allGoodslist.length > 9) {
						this.goodsList = this.allGoodslist.slice(0, 9);
					} else {
						this.goodsList = this.allGoodslist;
					}
				})
			},
			//跳转优惠券
			toCoupon() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/mine/coupon/coupon'
					});
				}
			},
			//跳转重抽卡
			toAgaincoupon() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/mine/prop/reextraction'
					});
				}
			},
			//推荐盲盒
			getIndexRecommend() {
				this.loading = 1;
				this.$api.indexRecommend({
					activity_id: this.id,
					offset: this.page
				}).then(res => {
					if (res.length > 0) {
						this.loading = 0;
						res.forEach(item => {
							if (item.label_name === null) {
								item.label_name = [];
							} else {
								item.label_name = item.label_name.split(',');
							}
						})
						this.blindboxList = this.blindboxList.concat(res);
					} else {
						this.loading = 3;
					}
				})
			},
			//获取盲盒玩法规则
			getIndexBlindboxrules() {
				this.$api.indexBlindboxrules({
					activity_id: this.id
				}).then(res => {
					if (res != null) {
						this.ruleInfo = res.rules;
					}
				})
			},
			//获取预言玩法说明
			getIndexPredictintroduce() {
				this.$api.indexPredictintroduce({
					activity_id: this.id
				}).then(res => {
					if (res != null) {
						this.prophecyExplain = res.description;
					}
				})
			},
			//显示盲盒玩法规则
			showRule() {
				this.$refs.overlay.show();
			},
			//设置预言
			showProphesys() {
				uni.showToast({
					title: '更多活动，敬请期待～',
					icon: 'none'
				})
				// if(this.predict_lock==0){
				// 	this.showTip = true;
				// }else{
				// 	this.showProphecySetup = true;
				// }
			},
			//查看预言榜
			seeProphecylist() {
				uni.showToast({
					title: '更多活动，敬请期待～',
					icon: 'none'
				})
				// this.showProphecylist = true;
				// this.$api.indexPredictlist({
				// 	activity_id:this.id,
				// 	offset:this.offset
				// }).then(res=>{
				// 	this.prophecyList = this.prophecyList.concat(res.predict_list);
				// 	this.myprophecy = res.my_rank;
				// })
			},
			//预言榜更多列表
			morePredictlist() {
				this.offset++;
				this.seeProphecylist();
			},
			//显示预言玩法说明
			showProphecy() {
				this.showProphecylist = false;
				this.showProphecyExplain = true;
			},
			//查看更多商品
			seemore() {
				this.showMoregoods = true;
			},
			//按商品等级查看
			changeLevel(e) {
				this.curLevel = e;
				this.$api.indexMoregoods({
					activity_id: this.id,
					type: this.curLevel
				}).then(res => {
					uni.hideLoading();
					this.filterGoodslist = res;
				})
			},
			//当前商品左切换
			goodsIndexReduce() {
				if (this.curGoodsIndex > 0) {
					this.curGoodsIndex--;
				} else {
					this.curGoodsIndex = this.goodsList.length - 1;
				}
			},
			//当前商品右切换
			goodsIndexAdd() {
				if (this.curGoodsIndex < this.goodsList.length - 1) {
					this.curGoodsIndex++;
				} else {
					this.curGoodsIndex = 0;
				}
			},
			//选择预言商品
			selectGoods(item, index) {
				this.prophecyGoods = item;
				this.prophecyGoodsIndex = index;
			},
			//确定设置
			confirmSetup() {
				this.$api.indexSelectpredictgoods({
					activity_id: this.id,
					goods_id: this.prophecyGoods.goods_id
				}).then(res => {
					uni.showToast({
						title: '设置成功',
						icon: 'none'
					})
					this.getActivityDetail();
				})
			},
			//隐藏预言弹框
			hideProphecySetup() {
				this.showProphecySetup = false;
				this.changeLevel(0);
			},
			//隐藏更多商品弹框
			hideMoregoods() {
				this.showMoregoods = false;
				this.changeLevel(0);
			},
			//获取盲盒购买界面信息 - 单抽
			getIndexExtractboxa1() {
				if (this.id != 0) {
					this.$api.indexExtractboxa({
						activity_id: this.id,
						open_method: 1
					}).then(res => {
						this.payBalance1 = res.balance;
						this.payInfo1 = res.order_info;
					})
				}

			},
			//获取盲盒购买界面信息 - 3抽
			getIndexExtractboxa3() {
				if (this.id != 0) {
					this.$api.indexExtractboxa({
						activity_id: this.id,
						open_method: 3
					}).then(res => {
						this.payBalance3 = res.balance;
						this.payInfo3 = res.order_info;
					})
				}
			},
			//获取盲盒购买界面信息 - 10连抽
			getIndexExtractboxa10() {
				if (this.id != 0) {
					this.$api.indexExtractboxa({
						activity_id: this.id,
						open_method: 10
					}).then(res => {
						this.payBalance10 = res.balance;
						this.payInfo10 = res.order_info;
					})
				}
			},
			//获取盲盒购买界面信息 - 五连抽
			getIndexExtractboxa2() {
				if (this.id != 0) {
					this.$api.indexExtractboxa({
						activity_id: this.id,
						open_method: 2
					}).then(res => {
						this.payBalance2 = res.balance;
						this.payInfo2 = res.order_info;
					})
				}

			},
			//去支付
			toPay(value) {
				if (!this.isBuytip) {
					uni.showToast({
						title: '请勾选未成年人购买提示',
						icon: 'none'
					})
					return
				}
				this.open_method = value;
				this.showDemo = false;
				this.showTip = false;
				this.showMask = false;
				let discount = 0;
				if (this.open_method === 2) {
					this.payBalance = this.payBalance2;
					this.payInfo = this.payInfo2;
					this.initPrice = this.payInfo.price;
					this.usebalancePayablemoney = this.payInfo.price;
					discount = this.discountMoney;
				} else if (this.open_method === 3) {
					this.payBalance = this.payBalance3;
					this.payInfo = this.payInfo3;
					this.initPrice = this.payInfo.price;
					this.usebalancePayablemoney = this.payInfo.price;
					discount = this.discountMoney;
				} else if (this.open_method === 10) {
					this.payBalance = this.payBalance10;
					this.payInfo = this.payInfo10;
					this.initPrice = this.payInfo.price;
					this.usebalancePayablemoney = this.payInfo.price;
					discount = this.discountMoney;
				} else {
					this.payBalance = this.payBalance1;
					this.payInfo = this.payInfo1;
					this.initPrice = this.payInfo.price;
					this.usebalancePayablemoney = this.payInfo.price;
					discount = 0;
				}
				uni.navigateTo({
					url: '/pages/blindbox/confirmPay?' + this.$url.urlEncode({
						activity_id: this.id,
						price: this.initPrice,
						open_method: this.open_method,
						discount: discount,
						cjType: 'cj'
					})
				})
				// this.showPayframe = true;
			},
			//查看购买须知
			toPurchaseInstructions() {
				uni.navigateTo({
					url: './purchaseInstructions'
				})
			},
			//试玩
			demo() {
				if (!this.allowTap) return
				this.allowTap = false;
				setTimeout(() => {
					this.allowTap = true;
				}, 1000)
				// this.isShowdynamicpic = true;
				// this.$api.indexTryonce({activity_id:this.id}).then(res=>{
				// 	setTimeout(()=>{
				// 		this.tryonceInfo = res;
				// 		this.isShowdynamicpic = false;
				// 		this.showDemo = true;
				// 		this.gifUrl = `/static/images/dynamicpic.gif?${new Date().getTime()}`;
				// 	},7500)
				// })
				uni.navigateTo({
					url: '/pages/blindbox/blindbox_result?' + this.$url.urlEncode({
						activity_id: this.id,
						price: this.payInfo1.price,
						order_id: 0,
						open_method: 3
					})
				})
			},
			//获取可用的盲盒重抽卡
			getIndexMyagaincoupon() {
				this.$api.indexMyagaincoupon({
					activity_id: this.id,
				}).then(res => {
					this.againcouponList = res;
				})
			},
			//重抽
			repumping() {
				this.showMask = false;
				this.$api.indexAgainextract({
					activity_id: this.id,
					order_id: this.order_id,
					coupon_id: this.againcouponList[0].id
				}).then(res => {
					this.extractionResults = res;
					this.getIndexExtractboxa1();
					this.getIndexMyagaincoupon();
					setTimeout(() => {
						this.isShowdynamicpic = true;
					}, 500)
					setTimeout(() => {
						this.isShowdynamicpic = false;
						this.showMask = true;
					}, 7500)
				})
			},
			//获取抽取盲盒结果
			getIndexExtractboxc(order_id) {
				this.$api.indexExtractboxc({
					activity_id: this.id,
					order_id
				}).then(res => {
					this.extractionResults = res;
					this.showPayframe = false;
					this.isUsebalance = false;
					this.$api.activityDetail({
						activity_id: this.id
					}).then(res => {
						if (res.predict.avatar && res.predict.user_name && res.predict.total_price) {
							this.prophetInfo = res.predict;
						}
						this.userbalance = res.balance;
						this.predict_lock = res.predict_lock;
					})
					if (open_method == 1) {
						this.getIndexExtractboxa1();
					} else {
						this.getIndexExtractboxa2();
					}
					setTimeout(() => {
						this.isShowdynamicpic = true;
					}, 500)
					setTimeout(() => {
						this.isShowdynamicpic = false;
						this.showMask = true;
					}, 7500)
				})
			},
			//抽取盲盒 支付前
			payBefore(value) {
				if (!this.isAgree) {
					uni.showToast({
						title: '请阅读并同意盲盒购买须知',
						icon: 'none'
					})
					return
				}
				if (!this.allowTap) return
				this.allowTap = false;
				setTimeout(() => {
					this.allowTap = true;
				}, 1000)
				let balance = '';
				if (this.isUsebalance) {
					balance = this.balance;
				} else {
					balance = 0;
				}
				let coupon_id = '';
				if (this.coupon.coupon_id && this.coupon.coupon_id != undefined) {
					coupon_id = this.coupon.coupon_id;
				}
				if (this.usebalancePayablemoney == 0) {
					//金额为0
					this.$api.indexExtractboxd({
						activity_id: this.id,
						coupon_id,
						balance,
						open_method: value,
						price: this.usebalancePayablemoney,
						pay_type: '0'
					}).then(res => {
						console.log("抽取盲盒金额为0: ", res);
						this.order_id = res.order_id;
						this.getIndexExtractboxc(res.order_id);
					})
				} else {
					//金额大于0
					this.$api.indexExtractboxb({
						activity_id: this.id,
						coupon_id,
						balance,
						open_method: value,
						price: this.usebalancePayablemoney,
						pay_type: this.payActive
					}).then(res => {
						console.log('抽取盲盒金额大于0', res);
						this.order_id = res.order_id;
						//支付
						this.goPay(this.payActive, res.pay_info);
					})
				}
			},
			//去支付
			goPay(pay_type, payInfo) {
				uni.showLoading({
					title: '支付中...'
				})
				if (pay_type == 2) {
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay",
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										this.getIndexExtractboxc(this.order_id);
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				} else {
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay",
									"orderInfo": payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										this.getIndexExtractboxc(this.order_id);
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		// padding-bottom: 130rpx;
	}

	.price1 {
		position: absolute;
		left: 50%;
		bottom: 0;
		color: #000;
		transform: translate(-50%, 130rpx);
		font-size: 32rpx;
		font-weight: bold;


		.icon,
		.unit {
			font-size: 14rpx;
			margin: 0 5rpx;
			transform: scale(.1);
		}
	}

	/deep/.pulldownrefresh {
		text {
			color: #FFFFFF;
		}
	}

	/deep/.danmus {
		top: 150rpx !important;
	}

	.topImg {
		top: 80rpx;
		width: 40%;
		height: 60rpx;
		position: relative;
		margin-left: 30%;

	}

	.titleInfo {
		@include center-start;
		margin-top: 80rpx;
		width: 100%;
		color: #ffffff;
		font-size: 18rpx;
		font-weight: 800;
	}

	.dynamicpic {
		position: fixed;
		z-index: 9999;
		top: 400rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.topmain {
		width: 750rpx;
		height: 100vh;
		position: relative;
		background-image: url('@/static/images/newhone/bghead0.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow-y: auto;

		.topmainbg {}

		.botbtn {
			width: 750rpx;
			// background: #FFFFFF;
			// border: 1rpx solid #EBEBEB;
			padding: 24rpx 30rpx 18rpx;
			box-sizing: border-box;
			@include between-end;
			margin-top: 36rpx;

			.youhui {
				width: 98rpx;
				height: 98rpx;
				margin-bottom: 10rpx;
				text-align: center;
				position: relative;

				image {
					@include img;
					position: absolute;
					top: 0;
					left: 40rpx;
				}

				text {
					width: 220rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					left: 40rpx;
				}
			}

			.btn1 {
				width: 296rpx;
				height: 76rpx;
				background: linear-gradient(180deg, #00E8FF 0%, #985FFF 100%);
				border-radius: 36rpx;
				padding: 9rpx 0;
				box-sizing: border-box;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				@include center;
			}

			.btn2 {
				width: 497rpx;
				height: 117rpx;
				// background: linear-gradient(180deg, #FFBE00 0%, #FF1200 100%);
				// border-radius: 36rpx;
				// padding: 9rpx 0;
				// box-sizing: border-box;
				// font-size: 28rpx;
				// font-family: PingFangSC-Medium, PingFang SC;
				// font-weight: 500;
				// color: #FFFFFF;
				background-image: url('@/static/images/newhone/ljkh.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				@include center;
			}
		}
	}

	.wallet {
		@include center;
		font-size: 22rpx;
		margin-top: 10rpx;
		// font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #020001;
		// @include center-start; 
		width: 30%;
		margin-left: 35%;
		// line-height: 30rpx;
		background-color: #e6f8fd;
		border-width: 55rpx;
		// box-shadow: 0 2rpx 4rpx 2rpx #536eee;
		border-radius: 28rpx;
		margin-bottom: 15rpx;
		border: 1px solid #536eee;
	}

	.topnav {
		width: 750rpx;
		height: 100vh;
		position: absolute;
		top: 0;
		box-sizing: border-box;

		.userinfo {
			width: 100rpx;
			padding: 0 50rpx;
			@include between;
			position: fixed;
			z-index: 9999;
			top: 100rpx;

			.back {
				@include center;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				text {
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 16rpx;
				}
			}

			.title {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
			}

		}

		.GoodsBox {
			width: 90vw;
			height: 300rpx;
			background-image: url('@/static/images/newhone/GoodsBox.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			margin: auto;
			position: relative;
			margin-top: 300rpx;

			.lt {
				position: absolute;
				left: 20rpx;
				top: 0rpx;
				font-weight: 600;

				text {
					font-weight: 400;
					display: block;
					font-size: 12rpx;
					color: #A2BCC5;
				}
			}

			.rt {
				position: absolute;
				right: 30rpx;
				top: 20rpx;
				font-size: 14rpx;
				color: #A2BCC5;
				display: flex;
				align-items: center;

				image {
					width: 23rpx;
					height: 23rpx;
					margin-right: 10rpx;
				}
			}

			.cate {
				.cateList {
					display: flex;
					padding-top: 80rpx;

					.item {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						color: #999;

						image {
							width: 50rpx;
							height: 40rpx;
							margin-right: 5rpx
						}
					}
				}

				.cateGoods {
					height: 150rpx;
					display: flex;
					align-items: center;
					overflow: scroll;
					margin-top: 20rpx;

					.li {
						width: 140rpx;
						height: 140rpx;
						position: relative;
						background-color: #fff;
						text-align: center;

						.typeImage {
							width: 50rpx;
							height: 40rpx;
							position: absolute;
							right: 5rpx;
							top: 5rpx;
						}

						.goodImage {
							width: 100rpx;
							height: 100rpx;
							border-radius: 10rpx 10rpx 0 0;
						}

						.goodPrice {
							background-color: #b2d4ff;
							color: #fff;
							border-radius: 0 0 10rpx 10rpx;
							line-height: 40rpx;
							text-align: center;
						}
					}
				}
			}
		}

		.rightTool {
			width: 122rpx;
			height: 256rpx;
			background-image: url('../../static/images/newhone/rightTool.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: fixed;
			right: 10rpx;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-around;
			z-index: 99;

			.youxi1,
			.baodi1 {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.info {
			width: 100vw;
			position: fixed;
			left: 0;
			top: 40rpx;
			z-index: 1000;

			.info_left {
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				position: fixed;
				left: 0rpx;
				top: 40%;

				image {
					width: 60rpx;
					height: 60rpx;
				}

			}

			.info_right {
				padding: 40rpx 0;
				position: absolute;
				right: 0;
				top: 0;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				z-index: 10000;
			}

			.tool {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}

				text {
					width: 100%;
					text-align: center;
					font-size: 8rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					position: absolute;
					left: 0;
					bottom: 5rpx;
					transform: scale(0.7);
					z-index: 2;
				}
			}

			.tool.small {
				width: 60rpx;
				height: 60rpx;
				margin-right: 10rpx;
			}

			.tool.small.yinyue {
				animation: rotate 5s linear infinite;
			}

			@keyframes rotate {
				from {
					transform: rotate(0deg);
				}

				50% {
					transform: rotate(180deg);
				}

				to {
					transform: rotate(360deg);
				}
			}
		}

		.mainpic {
			text-align: center;
			transform: scale(1);

			.dizuo {
				width: 533rpx;
				height: 256rpx;
				position: absolute;
				left: 50%;
				top: 645rpx;
				transform: translate(-50%, 0%);
				z-index: -1;
			}

			&_img {
				width: 612rpx;
				height: 612rpx;
				animation: picWobble 3s infinite linear;
				margin-top: 140rpx;
			}

			@keyframes picWobble {
				0% {
					transform: translateY(0);
				}

				50% {
					transform: translateY(30rpx);
				}

				100% {
					transform: translateY(0rpx);
				}
			}
		}

		.mainpic_seegoods {
			width: 86rpx;
			height: 76rpx;
			position: absolute;
			top: 730rpx;
			right: 202rpx;
			animation: seeWobble 3s infinite linear;

			@keyframes seeWobble {
				0% {
					transform: translate(0, 0);
				}

				50% {
					transform: translate(30rpx, 30rpx);
				}

				100% {
					transform: translate(0, 0);
				}
			}
		}

		.playbtn {
			position: absolute;
			top: 1000rpx;
			right: 34rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.rule {
			position: absolute;
			top: 1000rpx;
			left: 24rpx;

			@include column-center;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 6rpx;
			}
		}

		.energy {
			@include column-center;

			&_nengliang {
				width: 238rpx;
				height: 70rpx;
				position: relative;

				image {
					@include img;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
				}

				text {
					width: 238rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B557F7;
					position: absolute;
					top: 8rpx;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;
				}
			}

			&_progress {
				width: 640rpx;
				height: 20rpx;
				background: rgba(255, 255, 255, 0.49);
				box-shadow: 0 2rpx 4rpx 2rpx rgba(105, 22, 255, 0.29);
				border-radius: 28rpx;
				border: 2rpx solid #FFFFFF;
				position: relative;

				&_bar {
					width: 235rpx;
					height: 18rpx;
					background: linear-gradient(86deg, #00E9FF 0%, #985FFF 100%);
					border-radius: 28rpx;
					position: absolute;
					top: 0rpx;
					left: 0;
				}
			}
		}

		.buytip {
			@include center;
			margin-top: 40rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.risktip1 {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			margin-top: 40rpx;
		}

		.risktip2 {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.probability {
		width: 702rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0 2rpx 4rpx 2rpx rgba(105, 22, 255, 0.29);
		border-radius: 75rpx;
		border: 2rpx solid #FFFFFF;
		margin: 80rpx auto 0;

		.probability_title {
			width: 102rpx;
			height: 102rpx;
			background: #FFFFFF;
			box-shadow: 0 2rpx 6rpx 0 rgba(194, 194, 194, 0.5000);
			border-radius: 50%;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #6551BB;
			@include column-center;
			justify-content: center;

			text {
				display: block
			}
		}

		&_main {
			@include between;
			padding: 9rpx 40rpx 9rpx 9rpx;

			&_item {
				@include column-center;

				&_text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}

				&_num {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}
			}
		}
	}

	.main {
		width: 750rpx;
		// background-image: url();
		background-size: cover;
		// padding: 30rpx 0;
		box-sizing: border-box;
		margin-top: -10rpx;
		// background-color: #3260c3;


		.text {
			@include between-start;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				@include column-center;

				.tip1 {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				.tip2 {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 12rpx;
				}
			}

			.more {
				@include align-center;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.like {
			width: 264rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			margin: 0 auto 30rpx;
			text-align: center;
			position: relative;

			&::before {
				content: '';
				width: 50rpx;
				height: 2rpx;
				background-color: #FFFFFF;
				position: absolute;
				left: 0rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			&::after {
				content: '';
				width: 50rpx;
				height: 2rpx;
				background-color: #FFFFFF;
				position: absolute;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}


	}

	.goodslist {
		display: flex;
		flex-wrap: wrap;
		margin-top: 26rpx;
		padding: 40rpx 30rpx 30rpx;
		box-sizing: border-box;

		.goods {
			width: 330rpx;
			border-radius: 12rpx;
			background: linear-gradient(0deg, #f5ffff 0%, #ffdcdc 100%);
			margin: 0 30rpx 30rpx 0;
			position: relative;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.tagImage {
				width: 50rpx;
				height: 40rpx;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}

			&_tag {
				width: 143rpx;
				height: 46rpx;
				background: #ff0000;
				border-radius: 12rpx 0;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
				@include center;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
			}

			&_pic {
				width: 330rpx;
				height: 330rpx;
			}

			&_price {
				height: 36rpx;
				background: linear-gradient(180deg, #00e8ff 0%, #985fff 100%);
				border-radius: 12rpx 12rpx 0 0;
				opacity: 0.8;
				padding: 0 8rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				display: inline-block;
				position: absolute;
				top: 300rpx;
				right: 0;
			}

			&_title {
				width: 100%;
				height: 124rpx;
				background: #ffffff;
				border-radius: 0 0 12rpx 12rpx;
				padding: 24rpx;

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					@include two;
				}
			}
		}
	}

	.chuanshuo1.active text,
	.tag1 {
		background: #d24a03 !important;
	}

	.shishi1.active text,
	.tag2 {
		background: #6f09d9 !important;
	}

	.xiyou1.active text,
	.tag3 {
		background: #9f7c25 !important;
	}

	.putong1.active text,
	.tag4 {
		background: #0c79b1 !important;
	}

	.all {
		max-height: 60vh;

		.allgoods {
			width: 100%;
			background-color: #f5f5f5;
			text-align: center;
			position: fixed;
			z-index: 999;
			top: 0;
			left: 50%;
			transform: translateX(-50%);

			&_title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin: 52rpx 0 0;

				text {
					color: #999;
					font-size: 24rpx;
					display: block;
					margin: 10rpx 0 20rpx;
				}
			}

			&_close {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				position: absolute;
				top: 45rpx;
				right: 50rpx;
			}

			.typeImage {
				width: 50rpx;
				height: 40rpx;
			}

			&_tag {
				margin: 0 0 30rpx;
				// @include between;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					width: 20%;
					font-size: 24rpx;
					margin-right: 1%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					text {
						width: 100rpx;
						display: block;
						border: 1px solid #ddd;
						border-radius: 5rpx;
						margin-top: 20rpx;
						padding: 5rpx 10rpx;
						font-size: 12rpx !important;
						color: #999;
					}
				}

				view:last-child {
					margin-right: 0;
				}

			}
		}
	}

	.prob {
		width: 750rpx;
		height: 150rpx;
		background: linear-gradient(0deg, #FFD9C2 0%, #FFF8F8 100%);
		position: fixed;
		bottom: 0;
		z-index: 9999;

		&_title {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF5400;
			text-align: center;
			margin-top: 25rpx;
		}

		&_probability {
			height: 100rpx;
			@include around;
			margin: 0 auto 30rpx;

			&_item {
				@include column-center;

				&_text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}

				&_num {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}
			}
		}
	}

	.payframe {
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;

		.pay {
			width: 100%;
			background-color: #FFFFFF;
			text-align: center;
			position: relative;

			&_title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin: 48rpx 0;
			}

			&_close {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				position: absolute;
				top: 0rpx;
				right: 30rpx;
			}
		}

		.paytip1 {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $main_color;
			text-align: center;
			transform: translateY(-20rpx);
		}

		.paytip2 {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $main_color;
			text-align: center;
			transform: translateY(20rpx);
		}

		.paygoods {
			display: flex;

			&_pic {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.paygoodsinfo {
				width: 500rpx;
				height: 160rpx;
				margin-left: 30rpx;
				@include column-between;

				&_title {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					@include one;
				}

				&_desc {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					@include one;
				}

				&_price {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FF0000;
				}
			}
		}

		.payinfo {
			@include between;
			margin-top: 30rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;

			&_text {
				@include between;
				width: 520rpx;

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}

				&_icon {
					@include align-center;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				&_coupon {
					width: 520rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					@include between;
				}

				&_more {
					width: 12rpx;
					height: 24rpx;
				}
			}
		}

		.line {
			width: 690rpx;
			height: 1rpx;
			background: #E5E5E5;
			margin: 30rpx auto;
		}

		.paymoney {
			@include between;

			&_title {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			&_money {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FF0000;
			}
		}

		.paytype {

			&_item {
				@include align-center;
				margin-top: 30rpx;

				&_check {
					width: 30rpx;
					height: 30rpx;
				}

				&_icon {
					width: 40rpx;
					height: 40rpx;
					margin: 0 20rpx;
				}

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.paybtn {
			width: 560rpx;
			height: 70rpx;
			background: linear-gradient(#ff1401, #ff9224);
			border-radius: 36rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			margin: 70rpx auto 0;
			@include center;

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.payagree {
			@include center;
			margin-top: 30rpx;

			&_icon {
				@include center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			&_text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-left: 16rpx;

				text {
					color: #FF0000;
				}
			}
		}
	}

	.warp {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.play {
		width: 100%;
		text-align: center;
		position: fixed;
		top: 220rpx;

		&_text {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			margin: 20rpx 0;
		}

		&_close {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 55rpx;
			right: 100rpx;
		}

		&_pic {
			width: 320rpx;
			height: 421rpx;
			margin: 0 auto;
			position: relative;

			&_img {
				@include img;
				position: absolute;
				top: 0;
				left: 0;
			}

			&_bg {
				width: 480rpx;
				height: 630rpx;
				position: absolute;
				top: -60rpx;
				left: -60rpx;
				z-index: -1;
				animation: xuanguang 5s linear infinite;
			}

			@keyframes xuanguang {
				from {
					transform: rotateZ(0);
				}

				to {
					transform: rotateZ(360deg);
				}
			}
		}

		&_value {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-top: 20rpx;

			&_tag {
				width: 100rpx;
				height: 40rpx;
				border-radius: 20rpx;
				@include center;
				margin-right: 15rpx;
			}
		}

		&_fragment {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin-bottom: 20rpx;

			&_img {
				width: 34rpx;
				height: 44rpx;
				margin-right: 6rpx;
			}
		}

		.play_five {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 48rpx 0;
		}

		.play_pics {
			@include column-center;
			margin-right: 5rpx;
			margin-top: 11rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&_image {
				width: 161rpx;
				height: 211rpx;
				position: relative;

				&_img {
					@include img;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 99999;
				}

				&_bg {
					width: 240rpx;
					height: 315rpx;
					position: absolute;
					top: -50rpx;
					left: -50rpx;
					z-index: -1;
					animation: xuanguang 5s linear infinite;
				}

				@keyframes xuanguang {
					from {
						transform: rotateZ(0);
					}

					to {
						transform: rotateZ(360deg);
					}
				}
			}

			&_title {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				margin: 20rpx 0;
				width: 180rpx;
				@include one;
			}

			&_value {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				@include center;
				margin-top: 20rpx;

				&_tag {
					width: 100rpx;
					height: 40rpx;
					border-radius: 20rpx;
					@include center;
					margin-right: 5rpx;
				}

				&_text {
					width: 140rpx;
					@include one;
				}
			}
		}

		&_fragments {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 30rpx;
			width: 630rpx;

			&_item {
				@include center;
				margin-bottom: 20rpx;

				&_img {
					width: 34rpx;
					height: 44rpx;
					margin-right: 6rpx;
				}

				&_text {
					width: 230rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					@include one;
				}
			}
		}

		&_title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			margin: 48rpx 0;
		}

		&_btn1 {
			width: 560rpx;
			height: 70rpx;
			background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin: 0 auto 30rpx;
		}

		&_btn2 {
			width: 560rpx;
			height: 70rpx;
			background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin: 0 auto 30rpx;
		}

		&_btn3 {
			width: 560rpx;
			height: 70rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin: 0 auto 30rpx;
		}

		&_tip {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.prophesytip {
		width: 530rpx;
		height: 530rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 50rpx 30rpx;
		@include column-center;

		image {
			width: 161rpx;
			height: 177rpx;
		}

		&_text {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $main_color;
			margin-top: 50rpx;
		}

		&_desc {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-top: 30rpx;
		}

		&_btns {
			width: 100%;
			@include between;
			margin-top: 50rpx;

			&_btn1 {
				width: 180rpx;
				height: 60rpx;
				background: linear-gradient(#ff1401, #ff9224);
				border-radius: 36rpx;
				padding: 9rpx 0;
				box-sizing: border-box;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				@include center;
			}

			&_btn2 {
				width: 180rpx;
				height: 60rpx;
				background: linear-gradient(#ff9526, #ffbc54);
				border-radius: 36rpx;
				padding: 9rpx 0;
				box-sizing: border-box;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				@include center;
			}
		}
	}

	.prophecylist {
		padding: 120rpx 30rpx;
		box-sizing: border-box;
		max-height: 734rpx;

		&::after {
			content: '';
			width: 100%;
			height: 100rpx;
			position: absolute;
		}

		.prophecy {
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			top: 0;
			z-index: 9999;
			text-align: center;
			padding-top: 50rpx;
			margin-bottom: 30rpx;

			&_title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}

			&_desc {
				position: absolute;
				top: 44rpx;
				right: 50rpx;

				text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					margin-left: 12rpx;
					transform: translateY(6rpx)
				}
			}
		}

		.prophecyitem {
			@include between;
			margin-bottom: 20rpx;
			position: relative;

			.first {
				background-color: #FF6408;
			}

			.second {
				background-color: #FF6F6F;
			}

			.third {
				background-color: #C595C5;
			}

			&_info {
				@include align-center;

				&_sort {
					width: 40rpx;
					height: 40rpx;
					background: #FFEADB;
					border-radius: 50%;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
					@include center;
				}

				&_avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin: 0 20rpx;
				}

				&_nickname {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}

			&_price {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FF0000;
			}
		}
	}

	.myprophecy {
		width: 100%;
		height: 100rpx;
		background-color: #F0AD4E;
		border-radius: 20rpx 20rpx 0 0;
		@include between;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		z-index: 999;

		&_info {
			@include align-center;

			&_avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			&_nickname {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin: 0 20rpx;
			}

			&_sort {
				width: 80rpx;
				height: 36rpx;
				background: #FF6408;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				@include center;
			}
		}

		&_price {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FF0000;
		}
	}

	.prophecyExplains {
		padding: 100rpx 0 30rpx;
		box-sizing: border-box;

		.prophecyExplain {
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			top: 0;
			z-index: 9999;
			text-align: center;
			margin-bottom: 30rpx;

			&_title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin: 48rpx 0;
			}

			&_close {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				position: absolute;
				top: 44rpx;
				right: 50rpx;
			}
		}

		.prophecyInfo {
			padding: 0 30rpx;
		}
	}

	.prophecySetup {
		width: 750rpx;
		background: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		border-radius: 15rpx 15rpx 0 0;

		&_top {
			display: flex;
			position: relative;

			&_left {
				width: 213rpx;
				background: linear-gradient(180deg, #FFE2D0 0%, #FF6F6F 100%);
				border-radius: 20rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
				padding: 15rpx;
				position: absolute;
				top: 47rpx;
				left: 25rpx;
			}

			&_pic {
				width: 239rpx;
				height: 315rpx;
				position: absolute;
				top: 31rpx;
				left: 246rpx;
			}

			&_right {
				width: 221rpx;
				background: linear-gradient(0deg, #FF4E4E 0%, #FFF6B6 100%);
				border-radius: 20rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
				padding: 15rpx;
				position: absolute;
				top: 143rpx;
				right: 27rpx;
			}

			&_close {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				position: absolute;
				top: 45rpx;
				right: 50rpx;
			}
		}

		&_tag {
			margin: 390rpx 50rpx 23rpx;
			@include between;

			text {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				width: 140rpx;
				height: 60rpx;
				background: #FFFFFF;
				border: 2rpx solid #A0A0A0;
				border-radius: 30rpx;
				@include center;
			}

			.activeTag {
				color: #FE690F;
				border: 2rpx solid #FE690F;
			}
		}

		&_goodslist {
			width: 750rpx;
			height: 336rpx;
			background: #FFF1E9;
			border: 1rpx solid #FFF1E9;
			padding: 17rpx 0 17rpx 30rpx;

			.goodsactive {
				border: 2rpx solid #FF6408;
				margin: -1;
			}

			&_item {
				width: 210rpx;
				height: 302rpx;
				background: linear-gradient(0deg, #F5FFFF 0%, #FFDCDC 100%);
				border-radius: 20rpx;
				display: inline-block;
				margin: 0 30rpx 30rpx 0;

				&_tag {
					width: 143rpx;
					height: 46rpx;
					background: #FF0000;
					border-radius: 20rpx 0;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					@include center;
				}

				&_pic {
					width: 175rpx;
					height: 123rpx;
					margin: 20rpx 20rpx 0;
				}

				&_price {
					width: 175rpx;
					height: 40rpx;
					margin: -30rpx 20rpx 0;
					position: relative;

					image {
						width: 175rpx;
						height: 40rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					text {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						width: 150rpx;
						text-align: center;
						@include one;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				&_title {
					width: 175rpx;
					height: 80rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					text-align: center;
					@include two;
					white-space: pre-wrap;
					margin: 15rpx 23rpx 20rpx;
				}
			}
		}

		&_setup {
			height: 181rpx;
			padding: 33rpx 50rpx 28rpx;

			&_desc {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3D3D3D;
				text-align: center;
			}

			&_btn {
				width: 650rpx;
				height: 70rpx;
				border: 1rpx solid #FFF1E9;
				background: linear-gradient(0deg, #FF1501 0%, #FF9023 100%);
				border-radius: 35rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				@include center;
				margin-top: 26rpx;
			}
		}
	}

	.chuanshuo {
		background: linear-gradient(180deg, #FFBF00 0%, #FF7700 100%) !important;
	}

	.shishi {
		background: linear-gradient(180deg, #FF7900 0%, #FE1F08 100%) !important;
	}

	.xiyou {
		background: linear-gradient(180deg, #B557F7 0%, #742AFF 100%) !important;
	}

	.putong {
		background: linear-gradient(360deg, #492AFF 0%, #02E6FF 100%) !important;
	}
</style>